<template>
    <el-form ref="form" :model="form" :rules="rules" v-loading="loading">
        <el-form-item prop="title" label="标题">
            <el-input type="text" v-model="form.title" :maxlength="50"/>
        </el-form-item>
        <el-form-item prop="content" label="内容">
            <div style="margin-top: 32px;">
                <editor v-model="form.content"/>
            </div>
        </el-form-item>
        <el-form-item class="text-center">
            <el-button type="primary" @click="submit('form')">提交</el-button>
        </el-form-item>
    </el-form>
</template>

<script>
    import {docInfo} from "@/api";
    import editor from "@/components/editor";

    export default {
        data() {
            return {
                rules: {
                    title: [
                        {required: true, message: '标题不能为空', trigger: 'blur'}
                    ]
                    , content: [
                        {required: true, message: '内容不能为空', trigger: 'change'}
                    ]

                }
                , loading: false
                , form: {
                    'title': '',
                    'content': '',
                }
            }
        }
        , props: ['pdata']
        , components: {editor}
        , mounted() {
            switch (this.pdata) {
                case "help":
                    this.method = 'post';
                    this.form.type = 1;
                    break;
                case "page":
                    this.method = 'post';
                    this.form.type = 2;
                    break;
                case "notice":
                    this.method = 'post';
                    this.form.type = 3;
                    break;
                default:
                    this.method = 'put';
                    this.loading = true;
                    docInfo('get', {id: this.pdata.id}, (res) => {
                        this.form = {
                            id: this.pdata.id,
                            title: res.title,
                            content: res.content,
                        };
                        this.loading = false;
                    });
            }
        }
        , methods: {
            submit(form) {
                this.$submit(this.$refs['form'], () => {
                    this.loading = true;
                    docInfo(this.method, this.form, () => {
                        this.loading = false;
                        this.$message.success('操作成功');
                        this.$emit('close', true)
                    }, () => {
                        this.loading = false;
                    })
                });
            }
        }
    }
</script>
